<!-- 测试结束后的页面，可以查看答案，或者再测一次 -->
<template>
	<view class="content">
		<view class="scorebg">
			<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/scoreicon.png" class="img1"></image>
			<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/left.png" class="img2" @click='back'></image>
		</view>
		<view class="score_box">
			<view class="circle_box">
				<view class="scorebox">
					<text class="score">{{info.testScore}}</text>分
				</view>
				<svg width="145" height="145" viewBox="0 0 440 440">
					<defs>
						<linearGradient x1="1" y1="0" x2="0" y2="0" id="gradient">
							<stop offset="0%" stop-color="#80C2FF"></stop>
							<stop offset="100%" stop-color="#8A98FF"></stop>
						</linearGradient>
					</defs>
					<circle cx="220" cy="220" r="170" class="circle-track"></circle>
					<!-- #ifdef APP-PLUS -->
					<circle cx="220" cy="220" r="170" transform="rotate(-90 220 220)" class="circle-bar" :style="
						`stroke-dashoffset:${info.accuracy}%`">
					</circle>
					<!-- #endif -->

					<text class="text" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">
						90分
					</text>
				</svg>
			</view>
			<view class="timebox">
				<view class="flex time align-center">
					<text>我的用时:</text>
					<view class="">
						{{handlerTime(info.timeConsuming)}}
					</view>
				</view>
				<view class="flex times align-center">
					<text>提交时间:</text>
					<view class="">
						{{info.createTime}}
					</view>
				</view>
				<view class="border_opacity"></view>
			</view>
			<view class="IconTimeBox">
				<view class="box_all">
					<view class="downbox bg1">
						<view class="">{{info.testTotalNumber}}分</view>
						<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/bluedown.png"></image>
					</view>
					<view class="icon_bottom">
						<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/score.png"></image>
						<view class="">总分数</view>
					</view>
				</view>
				<view class="box_all">
					<view class="downbox bg2">
						<view class="">{{info.accuracy}}%</view>
						<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/bluedown1.png"></image>
					</view>
					<view class="icon_bottom">
						<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/correct.png"></image>
						<view class="">正确率</view>
					</view>
				</view>
				<view class="box_all">
					<view class="downbox bg3">
						<view class="">{{handlerTime(info.testTime*60)}}</view>
						<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/purpledown.png"></image>
					</view>
					<view class="icon_bottom">
						<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/testTimeIcon.png"></image>
						<view class="">测验时间</view>
					</view>
				</view>
			</view>
			<view class="flex btn_bottom_position justify-between">
				<view class="again btnStyle" @click="againTest">再测一次</view>
				<view class="watch btnStyle" @click='seeAnswer'>查看答案</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		testResult
	} from '@/apis/apis.js'
	export default {
		data() {
			return {
				id: "",
				info: {},
				courseId: '', //跳转课程页面的id
			}
		},
		onLoad(options) {
			this.id = options.id
			this.courseId = options.courseId
		},
		onShow() {
			this.init()
		},
		methods: {
			init() {
				testResult({
					testMemberId: this.id
				}).then(res => {
					console.log(res)
					this.info = res.data
				})
			},
			handlerTime(value) {
				let sencond = parseInt(value) // 3600秒等于60分钟等于1小时
				let h = parseInt(sencond / 3600) // 小时数
				let m = parseInt(sencond % 3600 / 60) // 小时剩余的秒数÷60 得到几分钟
				let s = parseInt(sencond % 3600 % 60) // 剩余秒数
				let result = `${h<10?'0'+h:h}:${m<10?'0'+m:m}:${s<10?'0'+s:s}`
				console.log(result)
				return result
			},
			againTest() {
				this.back()
			},
			back() {
				// uni.navigateBack()
				//返回课程详情页
				let isTestscore = true
				uni.navigateTo({
					url: '../courseItem/courseItem?id=' + this.courseId + '&isTestscore=' + isTestscore
				})
			},
			seeAnswer() {
				uni.navigateTo({
					url: '../seeAnswer/seeAnswer?id=' + this.info.id
				})
			}
		},

	}
</script>

<style scoped lang="scss">
	circle {
		stroke-width: 50px;
		fill: none;
		stroke-dasharray: 1069px;
		/* 灰色进度槽 */
		stroke: #E7EDFC;
	}

	/* 渐变进度条 */
	.circle-bar {
		/* stroke-dashoffset慢慢变小，进度条就会慢慢出现 */
		// stroke-dashoffset: 30%;
		stroke: url(#gradient);
	}

	.flex {
		display: flex;
	}

	.justify-between {
		justify-content: space-between;
	}

	.align-center {
		align-items: center;
	}

	.content {
		width: 100%;
		height: 100vh;
		background-color: #F8F8F8;

		.scorebg {
			position: relative;

			.img1 {
				width: 100%;
				height: 484rpx;
			}

			.img2 {
				width: 18rpx;
				height: 34rpx;
				position: absolute;
				top: 74rpx;
				left: 30rpx;
				z-index: 9;
			}
		}

		.score_box {

			background-color: #fff;
			border-radius: 20rpx;
			position: absolute;
			top: 343rpx;
			left: 4%;
			right: 4%;
			bottom: 70rpx;
			overflow: hidden;
			overflow-y: visible;

			.circle_box {
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
				width: 290rpx;
				height: 290rpx;
				margin: 65rpx 0 0 200rpx;
				// background: linear-gradient(#80C2FF,#8A98FF);

				.scorebox {
					position: absolute;
					color: #423B3B;
					font-size: 30rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 236rpx;
					height: 236rpx;
					border-radius: 50%;

					.score {
						font-size: 60rpx;
					}

				}

				.text {
					font-size: 60rpx;
					font-weight: bold;
					color: #423B3B;
				}
			}

			.timebox {
				.border_opacity {
					border-bottom: 1rpx solid #000000;
					opacity: 0.1;
					margin: 0 36rpx 0 37rpx;
				}

				.time,
				.times {
					text {
						color: #2D2E2F;
						font-size: 28rpx;
						margin-right: 24rpx;
					}

					view {
						color: #ABABAB;
					}
				}

				.time {
					margin: 60rpx 0 36rpx 35rpx;
				}

				.times {
					margin: 0 0 63rpx 35rpx;
				}
			}

			.IconTimeBox {
				color: #3C3C3C;
				font-size: 28rpx;
				font-family: SourceHanSansCN-Medium;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				padding: 0 49rpx;

				.box_all {
					display: flex;
					flex-direction: column;
					align-items: center;

					.bg1 {
						background-color: #479FFF;
					}

					.bg2 {
						background-color: #4869FF;
					}

					.bg3 {
						background-color: #935DF0;
					}

					.downbox {
						width: 120rpx;
						height: 62rpx;
						border-radius: 10rpx;
						color: #fff;
						text-align: center;
						line-height: 62rpx;
						position: relative;
						// margin-bottom: -18rpx;
						z-index: 9;
						margin-top: 4vh;

						image {
							width: 22rpx;
							height: 9rpx;
							position: absolute;
							bottom: -9rpx;
							left: 49rpx;
							z-index: 9;
						}
					}

					.icon_bottom {
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-top: -18rpx;

						image {
							width: 148rpx;
							height: 148rpx;
						}
					}
				}
			}

			.btn_bottom_position {
				// position: absolute;
				// bottom: 65rpx;
				// left: 29rpx;
				// right: 37rpx;
				margin: 94rpx 0 66rpx 0;
				padding: 0 38rpx 0 30rpx;

				.again {
					background-color: #194FC9;
				}

				.btnStyle {
					width: 280rpx;
					height: 86rpx;
					color: #fff;
					font-size: 30rpx;
					line-height: 86rpx;
					text-align: center;
					border-radius: 43rpx;
				}

				.watch {
					background: linear-gradient(90deg, #FFD71F, #FFA70D);
				}
			}
		}
	}
</style>
